<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Swiper demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>
		<!-- Swiper -->
		<div class="swiper-container">
			<div class="swiper-wrapper">

				<div class="swiper-slide one">
					<div class="top ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.1s">
						<img src="images/one.jpg" />
					</div>
					<div class="bottom">
						<img src="images/jiezhi.png" class="jiezhi ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.6s" />
						<img src="images/womenjiehunla.png" class="women ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="1.3s" />
						<img src="images/2016117.png" alt="" class="time ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="4s" />
					</div>

				</div>

				<div class="swiper-slide two">
					<div class="left ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-delay="0.1s">
						<img src="images/two1.jpg" />
					</div>
					<div class="right ani" swiper-animate-effect="zoomIn" swiper-animate-duration="3s" swiper-animate-delay="1s">
						<div class="pic">
							<div class="top">
								<img src="images/two2.jpg" />
							</div>
							<div class="bottom">
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="3.5s" />
								<img src="images/t1.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.5s" />
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="5.5s" />
								<img src="images/t2.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="6.5s" />
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="7.5s" />
								<img src="images/t3.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="8.5s" />
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="9.5s" />
								<img src="images/t4.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="10.5s" />
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="11.5s" />
								<img src="images/t5.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="12.5s" />
								<img src="images/twoline.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="13.5s" />
							</div>
							<img src="images/fengche.gif" alt="" class="fengche ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="4.5s" />
						</div>
					</div>
				</div>

				<div class="swiper-slide three">
					<div class="pic ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.1s">
						<img src="images/three1.jpg" />
					</div>
					<img src="images/hua.png" class="top_hua ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.7s" />
					<img src="images/hua2.png" class="bottom_hua ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.7s" />
					<img src="images/dog.png" alt="" class="dog ani" swiper-animate-effect="slideInRight" swiper-animate-duration="2s" swiper-animate-delay="1.7s" />
					<img src="images/aini.png" class="aini ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2.2s" />
					<img src="images/yibeizi.png" class="yibeizi ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="3s" />
				</div>

				<div class="swiper-slide four">
					<div class="content">
						<div class="left">
							<div class="one ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-delay="0.1s">
								<img src="images/41.jpg" />
							</div>
							<div class="three ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-delay="0.1s">
								<img src="images/43.jpg" />
							</div>
						</div>
						<div class="right">
							<div class="two ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-delay="0.1s">
								<img src="images/42.jpg" />
							</div>
							<div class="four ani" swiper-animate-effect="zoomIn" swiper-animate-duration="2.5s" swiper-animate-delay="0.1s">
								<img src="images/44.jpg" />
							</div>

						</div>
						<img src="images/hua2.png" class="bottom_hua ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1.7s" />

					</div>
					<div class="word">
						<img src="images/chengnuo.PNG" class="left ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s" />
						<img src="images/xieshou.PNG" class="right ani" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="2.5s" />
					</div>
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>

		<!--音乐-->
		<div id="music">
			<img src="images/music.gif" class="m" />
			<img src="images/music_off.png" class="off" />
			<audio src="images/bgmusic.mp3" loop="loop" preload="auto" autoplay="autoplay" class="bgmusic"></audio>
		</div>
		<!--音乐结束-->
		<p class="copy">本教学案例由后盾网提供，取材网络，非商业用途</p>
		<!-- Swiper JS -->
		<script src="js/swiper.min.js"></script>
		<script src="js/swiper.animate1.0.2.min.js"></script>
		<script src="js/js.js"></script>
	</body>

</html>